<template>
  <div>
    <div class="money-wrap">
      <p style="color: red" v-if="money === null || money === undefined">
        请前往个人中心开启金币模式
      </p>
      <p class="money-text">金币数量:{{ money || 0 }}</p>
    </div>
    <header>
      <p>兑换中心</p>
    </header>
    <div v-if="money === null || money === undefined" class="empty">
      <p>请前往个人中心开启</p>
    </div>

    <div v-else class="goodsList">
       <div class="box" v-for="(item,index) in goodsList" :key="index" @click="getGoods">
        <var-link type="info">{{ item.value }}</var-link>
        <p>{{ item.money }}</p>
       </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getByTitle } from "@/api/config";
interface Item{
  value?:string,
  money?:number,
  icon?:string
}
type Money = null | number | undefined;
const money = ref<Money>(0);
const goodsList = ref<Item[]>([]);
onMounted(() => {
  initInfos();
  initGoods();
});
const initInfos = () => {
  getUserInfo()
    .then((res) => {
      money.value = res.data.integral;
    })
    .catch((err) => {
      console.log(err);
    });
};
const   initGoods = ()=> {
      getByTitle("goodsList1")
        .then((res) => {
          goodsList.value = res.data;
        })
        .catch((err) => {
          
        });
    };
const getGoods = ()=>{
  Snackbar.error('暂时无法使用该功能，等待更新！')
}
</script>

<style scoped lang="less">
.money-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0.5em;
  font-weight: bold;
  .money-text{
    font-size: 0.8rem;
    color:#303030;
  }
}
header {
  width: 100%;
  text-align: center;
  p {
    font-weight: bold;
    font-size: 1.2rem;
  }
}
.empty {
  width: 100%;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.goodsList {
  margin: 1rem 0;
  width: 100%;
  height: 70vh;
  overflow-y: auto;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.box{
  box-sizing: border-box;
  width:42vw;
  height:42vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin:0.5rem 4vw;
  border:1px solid #e7e7e7;
  box-shadow: 2px 2px 12px rgba(0,0,0,.2);
}
</style>
